<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { Api } from '@/assets/apis';
import { ref, onMounted } from 'vue'
import type { DetailData, LatestType, ListType } from '@/typings'
import { Toast } from 'vant';


const router = useRouter()
const route = useRoute()
const id = ref()
const title = ref()
const uuid = ref()
const loading = ref(false)
const poster = ref(false)

const ClassifyData = ref<DetailData>()
const LatestData = ref<LatestType>()
const ListType = ref<ListType>()

id.value = route.params.id
title.value = route.query.title


onMounted(async () => {
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
    });
    let { data } = await Api.getDetail(id.value, title.value)

    ClassifyData.value = data.feed
})

onMounted(async () => {
    let { data } = await Api.getLatest(id.value)

    LatestData.value = data

})

onMounted(async () => {
    let { data } = await Api.getList(id.value)
    ListType.value = data
    console.log('list', ListType.value);
    poster.value = true
    loading.value = true

    uuid.value = ListType.value.data.catalog[0].uuid
    Toast.clear()
})

const directory = () => {
    router.push(`/book/${id.value}/directory`)
}

const read = () => {
    router.push(`/reader/book/${id.value}?uuid=${uuid.value}`)
}

const history = ref(window.localStorage.getItem('bookshelf') ? JSON.parse(window.localStorage.bookshelf) : JSON.parse('[]'))

const join = () => {
    Toast.success('加入书架成功');


    let content = {
        title: ListType.value?.data.book.title,
        author: ListType.value?.data.book.author,
        coverImage: ListType.value?.data.book.coverImage,
        id: ListType.value?.data.book.sourceUuid
    }

    if (content == null) {
        return
    }
    let array = window.localStorage.getItem('bookshelf') ? JSON.parse(window.localStorage.bookshelf) : JSON.parse('[]')
    array = [content, ...array.filter((h: { title: string, author: string, coverImage: string, id: string }) => h.title !== content.title)]
    history.value = array
    window.localStorage.setItem('bookshelf', JSON.stringify(array))
}

</script>

<template>
    <div v-show="loading">
        <div class="header">
            <div class="back" @click="$router.go(-1)">
                <van-icon name="arrow-left" />
            </div>
            <div class="title">书籍详情</div>
            <div class="home" @click="$router.push('/')">首页</div>
        </div>
        <div class="content">
            <div class="info">
                <div class="poster">
                    <img :src="ListType?.data.book.coverImage" alt="" v-if="poster">
                </div>
                <div class="text">
                    <h1 class="book-name">{{ ClassifyData?.entry.title }}</h1>
                    <p class="book-author">作者：{{ ClassifyData?.entry.author.name }}</p>
                    <p class="bood-cate">分类：{{ ClassifyData?.entry['pris:book'].category }}</p>
                    <p class="book-count">字数：{{ ClassifyData?.entry['pris:book'].words }}</p>
                    <p class="click-count">点击：{{ ClassifyData?.entry['pris:subscribe'].clicksCount }}</p>
                </div>
            </div>
            <div class="btns">
                <div class="read" @click="read()">立即阅读</div>
                <div class="download">下载整本</div>
            </div>
            <div class="btns" @click="join()">
                <div class="join">
                    放入书架
                </div>
            </div>
        </div>
        <div class="book-recent">
            <img src="../../assets/images/new.png" alt="">
            <p class="latest">{{ LatestData?.item.latestArticleTitle }}</p>
            <p class="time">{{ ClassifyData?.entry['pris:book'].updated.slice(0, 10) }}更新</p>
        </div>
        <div class="book-detail">
            <h4>内容简介</h4>
            <p>{{ ClassifyData?.entry.content.text }}</p>
        </div>
        <div class="directory">
            <h4>
                目录
                <span>
                    (共{{ ClassifyData?.entry['pris:book'].totalArticleCount[0] }}章)
                </span>
            </h4>
            <div class="grade-list">
                <div class="grade" v-for="l in ListType?.data.catalog?.slice(0, 5)">
                    <div class="">{{ l.title }}</div>
                </div>
                <div class="more-list" @click="directory()">
                    更多目录
                    <van-icon name="arrow" />
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.header {
    display: flex;
    background-color: #E64D2E;
    height: 44rem;
    color: #fff;
    justify-content: space-between;
    align-items: center;
    line-height: 44rem;

    .back {
        margin-left: 10rem;
        font-size: 18rem;
    }

    .title {
        font-size: 18rem;
    }

    .home {
        width: 28rem;
        height: 44rem;
        padding: 0 15rem;
        font-size: 14rem;
    }
}

.content {
    width: 345rem;
    height: 228rem;
    padding: 15rem;

    .info {
        height: 130rem;
        display: flex;

        .poster {
            width: 93rem;
            height: 130rem;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .text {
            width: 242rem;
            margin-left: 10rem;

            h1 {
                color: #1D2C33;
                font-size: 16rem;
                font-weight: bold;
                height: 18rem;
                margin-bottom: 5rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            p {
                color: #888;
                height: 21rem;
                line-height: 21rem;

            }
        }
    }

    .btns {
        width: 345rem;
        height: 34rem;
        padding-top: 15rem;
        display: flex;
        text-align: center;
        line-height: 20rem;
        justify-content: space-between;
        font-size: 14rem;

        div {
            padding: 6rem 12rem;
            border: 1rem solid #3B98C9;
            border-radius: 3rem;
        }

        .read {
            width: 136rem;
            background-color: #3B98C9;
            color: #fff;
        }

        .download {
            width: 136rem;
            color: #3B98C9;
        }

        .join {
            flex: 1;
            color: #998C7F;
            background-color: #faf7f5;
            border: 1rem solid #E8E7E6;
        }
    }
}

.book-recent {
    width: 315rem;
    height: 35rem;
    padding: 20rem 15rem 20rem 45rem;
    background-color: #ebe8e6;
    position: relative;

    img {
        position: absolute;
        width: 25rem;
        height: 15rem;
        left: 15rem;
    }

    .latest {
        color: #3A98C9;
        font-size: 14rem;
    }

    .time {
        margin-top: 5rem;
        color: #ABA499;
    }
}

.book-detail {
    width: 345rem;
    // height: 90rem;
    padding: 15rem 15rem 20rem 15rem;
    background-color: #faf7f5;
    border-top: 1rem solid #E8E7E6;

    h4 {
        font-size: 16rem;
        font-weight: bold;
    }

    p {
        font-size: 14rem;
        color: #999;
        line-height: 20rem;
        padding-top: 12rem;
        text-indent: 30rem;
        -webkit-line-clamp: 4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.directory {
    width: 345rem;
    height: 194rem;
    padding: 15rem 15rem 20rem 15rem;
    border-top: 1rem solid #E8E7E6;
    border-bottom: 1rem sol #E8E7E6;
    background-color: #faf7f5;

    h4 {
        width: 345rem;
        color: #1D2C33;
        font-size: 16rem;
        font-weight: bold;

        span {
            font-size: 12rem;
            color: #ABA49A;
            font-weight: normal;
            line-height: 16rem;
        }

        .reverse {
            float: right;
            color: #3A98C9;
            font-size: 14rem;
        }
    }

    .grade-list {
        padding-top: 12rem;

        .grade {
            height: 23rem;
            font-size: 14rem;
            line-height: 23rem;
            color: #979999;
            text-indent: 25rem;

            div {
                height: 23rem;
                color: #979999;
                overflow: hidden;
            }
        }

        .more-list {
            width: 343rem;
            height: 29rem;
            border: 1rem solid #E4E0DD;
            margin-top: 14rem;
            text-align: center;
            line-height: 29rem;
            color: #998D7F;
        }
    }
}
</style>